<template>
	<view >
		<view class="head">
			<view @click="change(0)" :class="sel==0?'red':''" >未使用(<span>{{showData.length}}</span>)</view>
			<view @click="change(1)" :class="sel==1?'red':''" >已使用(<span>{{showData1.length}}</span>)</view>
			<view @click="change(2)" :class="sel==2?'red':''" >已失效(<span>{{showData2.length}}</span>)</view>
		</view>
		<view >
			<view :class="sel==0?'active':''" class="bb" v-for="(v,i) in showData">
				<view>
					<view class="tupian">
						
							<view>{{v.yh_mianzhi}}</view>
						<view>{{v.yh_menkan}}</view>
						
						
					</view>
					<view>
						<view class="aa">
							<view>{{v.yh_mingcheng}}</view>
							<button type="warn" size="mini">立即使用</button>
						</view>
						<view>{{v.yh_youxiaoqi}}</view>
						<view>{{v.yh_menkan}}</view>
					</view>
				</view>
			</view>
			<view  :class="sel==1?'active':''" class="bb" v-for="(v,i) in showData1">
				<view>
					<view class="tupian1">
					<view>{{v.yh_mianzhi}}</view>
					<view >{{v.yh_menkan}}</view>
					</view>
					<view>
						<view class="aa">
							<view>{{v.yh_mingcheng}}</view>
							<button type="warn" size="mini">已失效</button>
						</view>
						<view>{{v.yh_youxiaoqi}}</view>
						<view>{{v.yh_menkan}}</view>
					</view>
				</view>
			</view>
			<view  :class="sel==2?'active':''" class="bb" v-for="(v,i) in showData2">
				<view>
					<view class="tupian2">
						<view>{{v.yh_mianzhi}}</view>
						<view>{{v.yh_menkan}}</view>
					</view>
					<view>
						<view class="aa">
							<view>{{v.yh_mingcheng}}</view>
							<button type="warn" size="mini">已使用</button>
						</view>
						<view>{{v.yh_youxiaoqi}}</view>
						<view>{{v.yh_menkan}}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		toRefs,
		onMounted,
		reactive
	} from 'vue'
	import http from '../../utils/http.js'
	
	import store from '../../store/index.js'
	export default {
		setup() {
			let data = reactive({
				sel:0,
				showData: [],
					showData1: [],
						showData2: [],
				change:(a)=>{
					data.sel=a
				}
			})
			onMounted(() => {
				http({
					url: '/SetBasic/youhuiquanweishiyong',
					method: 'get',
					data:{
						id:store.state.userID
					}
				}).then((res) => {
					data.showData= res.data.data
				})
				http({
					url: '/SetBasic/youhuiquanyishiyong',
					method: 'get',
					data:{
						id:store.state.userID
					}
				}).then((res) => {
					data.showData1= res.data.data
				})
				http({
					url: '/SetBasic/youhuiquanyishixiao',
					method: 'get',
					data:{
						id:store.state.userID
					}
				}).then((res) => {
					data.showData2= res.data.data
					
				})
			})
			return {
				...toRefs(data)
			}
		},
		
	}
	
	
</script>

<style lang="less">
	.head{
		display: flex;
		justify-content: space-around;
		view{
			width: 250rpx;
			text-align: center;
			padding: 10rpx 0;
		}
	}
	.red{
		color: #FA5151;
		border-bottom: 1rpx solid #FA5151;
	}
	.bb{
		margin-bottom: 15rpx;
				display: none;
		&>view{
			display: flex;
			margin: 10rpx 15rpx;
			image{
				width: 220rpx;
			}
			view{
				// margin-left: 10rpx;
				
				&>view{
					flex: 1;
					&:nth-child(1){
						display: flex;
						justify-content: space-between;
					}
					&:not(:first-child){
						font-size: 30rpx;
						margin-top: 10rpx;
						color: #ACACAC;
					}
				}
			}
		}
	}
	.active{
		display: block !important;
	}
.tupian,.tupian1,.tupian2{
	display: flex;
	 flex-direction:column;
	color: white !important;
	width: 250rpx;
	height: 220rpx;
	background-color: #2B9939;
	margin-right: 20rpx;
	>view{
		
		&:nth-child(1){
			justify-content: center !important;
		}
		color: white !important;
		text-align: center;
	}
}


</style>
